<style scoped>
  .fjhao{
    line-height: 51px;
    padding-right: 30px;
    color: #C2C2C2;
    font-size: 12px;
  }
  .fjhao span{
    color: #2F83C3;
  }
  .cent-box .tips{
    width: 1174px;
    height: 39px;
    line-height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    color: #939CAB;
    background-color: #202430;
    margin: 0 auto;
    font-size: 14px;
  }
  .cent-box .tips img{
    margin-right: 5px;
  }
  .establish-btn{
    width: 514px;
    height: 51px;
    cursor: pointer;
  }
  .establish-btn img{
    width: 100%;
    height: 59px;
    margin-top: -8px;
  }
  .Fight{
    min-height: 1200px;
    background-color: #0E1421;
    width: 1200px;
    margin:  0 auto;
    padding-top: 36px;
  }
  .tal_box{
    display: flex;
    justify-content: space-between;
    background-color: #242C40;
    height: 51px;
  }
  .tal_box ul{
    display: flex;
  }
  .tal_box ul li{
    height: 49px;
    line-height: 49px;
    width: 221px;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
    background-position: -221px 0;
     background-repeat:no-repeat;
     background-size: 100% 100%;
     position: relative;
     overflow: hidden;
     transition: all .5s;
     background-image: url(../assets/bk-tal2-bgs.png);
  }
  .tal_box ul li:nth-child(1){
    position: relative;
    z-index: 9;
    background-image: url(../assets/bk-tal1-bgs.png);
  }
  .tal_box ul li:nth-child(2){
    position: relative;
    z-index: 8;
  }
  .tal_box ul li::after{
    position: absolute;
    top: -20px;
    bottom: -20px;
    right: 20px;
    background-color: #242C40;
    content: "";
    width: 40px;
    transform: rotate(31deg);
  }
  .tal_box ul li:not(:first-child)::before{
    position: absolute;
    top: -20px;
    bottom: -20px;
    left: -19px;
    background-color: #242C40;
    content: "";
    width: 40px;
    transform: rotate(31deg);
  }
  .tal_box ul li span{
    position: relative;
    z-index: 11;
  }
  .tal_box ul li:last-child::after{
    display: none;
  }
  .tal_box ul li:hover{
    background-image: url(../assets/bk-tal2-bgs.png);
    background-position: 0px 0;
    transition: all .5s;
    color: #333333;
  }
  .tal_box ul li:first-child:hover{
    background-image: url(../assets/bk-tal1-bgs.png);
    background-position: 0px 0;
    transition: all .5s;
    color: #333333;
  }
  .tal_box ul li:hover::after{
    display: none;
  }
  .tal_box ul li:not(:first-child){
    margin-left: -29px;
  }
  .tal_box ul .activ{
    background-image: url(../assets/bk-tal1-bgs.png);
    background-position: 0px 0;
    background-size: 100% 100%;
    color: #333333;
  }
  .tal_box ul .activ::after{
    display: none;
  }
  .tal_box ul .activ1::after{
    display: none;
  }
  .tal_box ul .activ1{
    background-image: url(../assets/bk-tal2-bgs.png);
    background-size: 100% 100%;
    background-position: 0px 0;
    color: #333333;
  }
  .create-modal{
    position: fixed;
    height: 100vh;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, .4);
    z-index: 99;
    overflow: hidden;
  }
  .content{
    width: 1045px;
    height: 100vh;
    position: absolute;
    right: 0;
    top: 0;
    background: #191E2B;
    display: flex;
    flex-direction: column;
    transition: all .4s;
  }
  .tab-bar{
    display: flex;
    height: 66px;
    background: #2B3242;
    font-size: 18px;
    color: #8194AE;
    text-align: center;
  }
  .type{
    flex: 1;
    height: 66px;
    box-sizing: border-box;
    line-height: 66px;
    border-bottom: 3px solid rgba(0, 0, 0, 0);
    transition: all .15s;
    cursor: pointer;
  }
  .type:hover{
    color: #fff
  }
  .type-active{
    color: #fff;
    border-color: #fff;
  }
  .container{
    padding: 22px 64px 0px;
    margin-bottom: 30px;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    overflow: auto;
    width: 100%;
  }
  .data-item{
    width: 14.6%;
    margin-bottom: 14px;
    font-size: 12px;
    cursor: pointer;
    color: #fff
  }
  .name{
    width: 97px;
    height: 27px;
    line-height: 27px;
    background: url(../assets/hbb-btn-bgs.png);
    background-size: 100% 100%;
    margin: 5px auto;
  }
  .money{
    color: #FFA32A;
  }
  .money img{
    width: 12px;
    margin-right: 4px;
    position: relative;
    top: 2px
  }
  .imgbox{
    position: relative;
    width: 118px;
    height: 118px;
    margin: auto;
  }
  .bgimg{
    width: 160px;
    height: 160px;
    position: absolute;
    top: -21px;
    left: -21px;
  }
  .boximg{
    width: 95px;
    position: absolute;
    top: 22px;
    left: 16px;
    background: url(../assets/hbb-list-box.png);
    background-size: 100% 100%;
    height: 86px;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .gunimg{
    width: 110%;
  }
  .cancel{
    width: 100%;
    height: 34px;
    background: #FFA22A;
    line-height: 34px;
    color: #000;
    font-size: 16px;
    position: absolute;
    bottom: 0;
    font-weight: 400;
  }
  .personType{
    display: flex;
    font-size: 16px;
    color: #515F72;
    text-align: center;
    margin: 0 auto 45px;
    width: 860px;
  }
  .p-type{
    cursor: pointer;
    height: 56px;
    line-height: 56px;
    flex: 1;
    box-sizing: border-box;
    border: 1px solid #303843;
  }
  .p-type-active{
    color: #0F82C6;
    border: 2px solid #0F82C6
  }
  .detail{
    padding: 0 85px 37px 93px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    font-size: 12px;
  }
  .gunbox{
    width: 65px;
    height: 55px;
    background-image: url(../assets/hbb-list-box.png);
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .guns{
    width: 90%;
  }
  .gun{
    display: flex;
    width: 325px;
  }
  .price{
    text-align: left;
    height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .money-ico{
    width: 12px;
    margin: 0 3px -2px 0;
  }
  .c-y{
    color: #FFA32A;
  }
  .c-g{
    color: #3AD221;
  }
  .creatbtn{
    width: 273px;
    height: 58px;
    background: #0F82C6;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    line-height: 58px;
    cursor: pointer;
  }
  .creatbtn:hover{
    background: rgba(15, 130, 198, .8);
  }
  .autocheck{
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px !important;
    background: #fff;
    border-radius: 2px;
    overflow: hidden;
    cursor: pointer;
    top: 4px
  }
  .checkimg{
    transition: all .15s;
  }
  .checkbox{
    cursor: pointer;
  }
</style>

<template>
  <div class="Fight">
      <div class="tal_box">
        <ul>
          <li  @click="get_tal(0)" :class="{'activ':activ==0}"><span>盲盒对战</span></li>
          <li  @click="get_tal(1)" :class="{'activ1':activ==1}"><span>官方对战</span></li>
          <li  @click="get_tal(2)" :class="{'activ1':activ==2}"><span>历史记录</span></li>
        </ul>
        <div v-if="goto_inedex" class="establish-btn"><img @click="createModal = true" src="../assets/Fight-cjdj-btn.png" ></div>
        <div class="fjhao" v-else>房间号:<span>{{fjId}}8455</span></div>
      </div>
      <ul class="cent-box">
        <li v-if="activ==0">
          <div v-if="goto_inedex">
            <BBattleList :fightBoxList='fightBoxList'></BBattleList>
            <div class="tips"><img src="../assets/warning-icon.png" ><span>本网站所有活动均为消遣娱乐、打发无聊。请勿沉迷；禁止利用互动活动进行赌博/欺诈/作弊/刷积分等违法违规行为，若有发现，我们将取消您的活动参与资格</span></div>
            <bindCentList @getindex="getindex" v-bind:CentList="CentList1"></bindCentList>
          </div>
          <div v-else>
            <fightPk :fjId="fjId" @getout="getout"></fightPk>
          </div>
        </li>
        <li v-if="activ==1">
          <div  v-if="goto_inedex">
            <OBattleList :fightBoxList='fightBoxList' :robotList='robotList'></OBattleList>
            <div class="tips"><img src="../assets/warning-icon.png" ><span>本网站所有活动均为消遣娱乐、打发无聊。请勿沉迷；禁止利用互动活动进行赌博/欺诈/作弊/刷积分等违法违规行为，若有发现，我们将取消您的活动参与资格</span></div>
            <bindCentList @getindex="getindex" v-bind:CentList="CentList2"></bindCentList>
          </div>
           <div v-else>
             <fightPk :fjId="fjId" @getout="getout"></fightPk>
           </div>
        </li>
        <li v-if="activ==2">
          <bindRecord ></bindRecord>
        </li>
      </ul>
      <div class="create-modal" @click="createModal = false" :style="{ width: modalWidth }">
        <div class="content" @click.stop :style="{ right: createModal ? 0 : '-1045px' }">
          <div class="tab-bar">
            <div v-for="(type, index) in createType" :key="index" :class="['type', { 'type-active': index === currentTypeIndex }]" @click="currentTypeIndex = index">{{type}}</div>
          </div>
          <div class="container" >
            <div class="data-item" v-for="i in 20" :key="i">
              <div class="imgbox">
                <img class="bgimg" src="../assets/fight-list-bg.png" alt="">
                <img class="bgimg" src="../assets/fight-list-bg.png" alt="">
                <div class="boximg">
                  <img class="gunimg" src="../assets/hbb-list-item.png" alt="">
                </div>
                <div class="cancel">取消</div>
              </div>
              <div class="name">南征北战</div>
              <div class="money">
                <img src="../assets/money-icon.png" alt="">
                99.99
              </div>
            </div>
          </div>
          <div class="action-bar">
            <div class="personType">
              <div v-for="(type, index) in personType" :key="index" :class="['p-type', { 'p-type-active': index == currentPersonTypeIndex }]" @click="currentPersonTypeIndex = index">{{type}}</div>
            </div>
            <div class="detail">
              <div class="gun">
                <div class="gunbox" v-for="i in 5" :key="i">
                  <img class="guns" src="../assets/gun4.png" alt="">
                </div>
              </div>
              <div class="price">
                <p>总价：<img class="money-ico" src="../assets/money-icon.png" alt=""><span class="c-y">99.99</span></p>
                <p>已选：<span class="c-g">0/6</span></p>
                <p @click="autoIntoRoom = !autoIntoRoom" class="checkbox">
                  <span class="autocheck">
                    <img :style='{ opacity: autoIntoRoom ? 1 : 0 }' class="checkimg" src="../assets/check.png" alt="">
                  </span>
                自动进入房间</p>
              </div>
              <div class="creatbtn">创建对局</div>
            </div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
  import BBattleList from '../components/Fight/BBattleList.vue'
  import OBattleList from '../components/Fight/OBattleList.vue'
  import bindRecord from '../components/Fight/bindRecord.vue'
  import bindCentList from '../components/Fight/bindCentList.vue'
  import bindCentLista from '../components/Fight/bindCentList1.vue'
  import fightPk from '../components/Fight/fightPk.vue'
  export default {
    components:{
      BBattleList,
      OBattleList,
      bindRecord,
      bindCentList,
      bindCentLista,
      fightPk
    },
   data () {
      return {
        modalWidth: 0,
        autoIntoRoom: true,
        createType: ['全部', '武器箱', '一念天堂', '五五开', '新手推荐'],
        personType: ['双人对战', '三人对战'],
        activ:0,
        CentList1:[0,1,2,0,1,2,1,2,1],
        CentList2:[2,1,0,2,0,1,1,0,2],
        goto_inedex:true,
        fjId:'',
        createModal: false,
        currentTypeIndex: 0,
        currentPersonTypeIndex: 0,
        fightBoxList: [],
        robotList: []
      }
    },
    watch: {
      createModal(newVal) {
        if(newVal) {
          this.modalWidth = '100vw'
        } else {
          setTimeout(() => {
            this.modalWidth = 0
          }, 400);
        }
      },
    },
    methods: {
        get_tal(e){
          this.activ = e;
          this.goto_inedex = true;
        },
        getindex(e){
          this.fjId = e;
          this.goto_inedex = false;
          document.documentElement.scrollTop = 0;
        },
        getout(e){
          this.goto_inedex = true;
        },
        getFightBox() {
          this.$api.get('/api/battle/box', {}, res => {
            if (res.code === 200) {
              this.fightBoxList = res.data.blindBoxBattle
              this.robotList = res.data.officialRobot
            } else {
              this.$confirm({
                type: '提示',
                time: '1',
                msg: res.msg
              })
            }
          })
        }
    },
    created() {
      var token = window.localStorage.getItem('token');
      if(!token){
        this.$router.push({
          path: `/Homes`,
        })
        return false
      }
      this.getFightBox()
    }
  }
</script>